<template>
  <div v-if="isLoading" class="loading-state">正在加载时间轴...</div>
  <div v-else-if="error" class="error-state">{{ error }}</div>
  <div class="order-timeline" v-else-if="timelineNodes.length > 0">
    <!-- El-Steps 组件的使用和之前一样 -->
    <el-steps :active="activeIndex" finish-status="success" process-status="process" align-center>
      <el-step
        v-for="node in timelineNodes"
        :key="node.key"
        :title="node.title"
        :status="getStepStatus(node.status)"
      >
        <template #description>
          <div v-if="node.timestamp" class="timestamp">{{ node.timestamp }}</div>
        </template>
      </el-step>
    </el-steps>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useOrderStore } from '@/store/modules/orderTimeLine';
import type { TimelineNodeApiStatus } from '@/api/ordermange/index'; // 引入类型

// Element Plus 的 Step 组件接受的状态类型
type ElStepStatus = 'success' | 'process' | 'wait' | 'error' | 'finish';

const orderStore = useOrderStore();
const { timelineNodes, isLoading, error } = storeToRefs(orderStore);

const props = defineProps({
  orderId: {
    type: [Number], 
    required: true,  
  },
});

// activeIndex 的返回值是 number，类型安全
const activeIndex = computed<number>(() => {
  const index = timelineNodes.value.findIndex(node => node.status === 'process');
  return index !== -1 ? index : timelineNodes.value.length;
});

// 这个函数现在是类型安全的，它接受我们定义的 TimelineNodeApiStatus
// 并返回 Element Plus 组件可以接受的 ElStepStatus
const getStepStatus = (status: TimelineNodeApiStatus): ElStepStatus => {
  switch (status) {
    case 'finish':
      return 'success';
    case 'process':
      return 'process';
    case 'wait':
      return 'wait';
    default:
      // default case 保证了函数的健壮性
      return 'wait';
  }
};

const loadTimeline = () => {
  if (props.orderId) {
    orderStore.fetchTimeline(props.orderId);
  }
};

onMounted(() => {
  loadTimeline()
});
</script>

<style scoped>
/* 样式与之前相同 */
.order-timeline {
  padding: 20px;
  background-color: #fff;
}
.timestamp {
  font-size: 12px;
  color: #606266;
  margin-top: 4px;
}
.loading-state, .error-state {
  text-align: center;
  padding: 40px;
  color: #909399;
}
/* 你可能需要一些自定义CSS来微调样式，使其与你的图片完全一致 */
/* 例如，修改连接线的样式 */
:deep(.el-step__line) {
  /* background-color: transparent !important; */
  /* border-style: dashed !important; */
}
</style>
